<template>
	<view class="coupon-container-modal" :class="[showModal ? 'modal-show':'']">
		<view class="coupon-container" :class="[showModal ? 'coupon-container-show':'']">
			<view class="title-wrap">
				<view class="title">选择优惠券</view>
				<view class="close line-center" @tap='close'>
					<uni-icons type='closeempty' color='#979797'></uni-icons>
				</view>
			</view>
			<scroll-view class="coupon-scroll" scroll-y="true" scroll-with-animation="true">
				<view v-if='showData'>
					<template v-if='list.length > 0'>
						<view class="coupon-wrap">
							<view class="coupon-item" v-for="(item,index) in couponList" :key="index"
								:class="[item.is_flag ? 'coupon-item-mb':'']">
								<view class="coupon-img" @tap='switchCoupon(index)'>
									<image src='../../static/coupon-bg1.png'></image>
									<view class="coupon-item-con">
										<view class="coupon-item-left">
											<view>{{item.reduce_price_int}}<text>元</text></view>
										</view>
										<view class="coupon-item-right">
											<view class="top">
												<view class="title">{{item.name}}
												</view>
												<view class="tip">满{{item.min_price}}元可以用
												</view>
												<view class="tip">{{item.start_time}}-{{item.end_time}}</view>
											</view>
											<view class="rules line-v-center">
												<text :class="[item.is_flag ? 'op':'']"
													v-if='tabType == "isUsable"'>使用规则</text>
												<text :class="[item.is_flag ? 'op':'']" v-else
													class="title-used">使用规则</text>
												<view class="circle" @tap.stop='watchRules(index)'>
													<image src='../../static/down.png' v-if='!item.is_flag'></image>
													<image src='../../static/up.png' v-else></image>
												</view>
											</view>
											<!-- && item.is_checked -->
											<view class="check line-center">
												<uni-icons type='checkbox-filled' size="20"
													:color='checkCouponIndex == index  ? "#FF1C03":"#DEDBDB"'></uni-icons>


												<!-- <uni-icons type='checkbox-filled' size="20" color='#FF1C03' v-if='checkCouponIndex == index || item.is_checked'></uni-icons>
												<uni-icons type='checkbox-filled' size="20" color='#DEDBDB' v-else></uni-icons> -->
												<!-- <uni-icons type='checkbox-filled' size="20" :color='checkCouponIndex == index ? "#FF1C03":"#DEDBDB"'></uni-icons> -->
											</view>
										</view>
									</view>
								</view>
								<view class="rules-wrap" :class="[item.is_flag ? 'rules-wrap-show':'']">
									<view class="title">使用规则</view>
									<view class="p">· 下单满{{item.min_price}}元可用;</view>
									<view class="p">· 有效期内只可使用一次;</view>
									<view class="p">· 一笔订单只能使用一次优惠，且不与其他优惠同享</view>
								</view>
							</view>
						</view>
					</template>
					<view v-else>
						<no-data noDataImg='/static/no-coupon.png' text='暂无可用优惠券'></no-data>
					</view>
				</view>
			</scroll-view>
			<view class="watch-coupon line-center" @tap='watchCoupon'>
				查看所有券<uni-icons type='right' size="14"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "select-coupon-modal",
		props: {
			showModal: Boolean,
			list: Array
		},
		watch: {
			list: {
				immediate: true,
				handler(newV) {
					this.couponList = newV;
				},
			}
		},
		data() {
			return {
				showData: true,
				couponList: [],
				checkCouponItem: {
					id: 0,
					name: '',
					reduce_price: '',
				},
				checkCouponIndex: -1,
			}
		},
		methods: {
			watchRules(index) {
				const list = this.couponList;
				list[index].is_flag = !list[index].is_flag;
				this.couponList = list;
			},
			watchCoupon() {
				uni.navigateTo({
					url: '/pages/coupon-page/coupon/coupon'
				})
			},
			switchCoupon(index) {
				let list = this.couponList;
				console.log('index', index)
				if (index != this.checkCouponIndex) {
					this.checkCouponIndex = index;
					this.checkCouponItem.id = this.couponList[index].user_coupon_id;
					this.checkCouponItem.name = this.couponList[index].name;
					this.checkCouponItem.reduce_price = this.couponList[index].reduce_price;
				} else {
					this.checkCouponIndex = -1;
					this.checkCouponItem.id = 0;
					this.checkCouponItem.name = '';
					this.checkCouponItem.reduce_price = 0;
				}
				this.couponList = list;
				console.log('this.couponList', this.couponList)
				this.$emit('switchCoupon', this.checkCouponItem)
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-container-modal {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		backdrop-filter: blur(10px);
		visibility: hidden;
		opacity: 0;
		transition: all 0.2s;
	}

	.modal-show {
		visibility: visible;
		opacity: 1;
	}

	.coupon-container {
		width: 100%;
		height: 828rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		position: fixed;
		left: 0;
		bottom: 0;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}

	.coupon-container-show {
		visibility: visible;
		transform: translate3d(0, 0, 0);
	}

	.title-wrap {
		padding: 0rpx 24rpx;
		height: 80rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.close {
			width: 44rpx;
			height: 44rpx;
			background: #F5F5F5;
			border-radius: 100%;
			position: absolute;
			right: 32rpx;
			top: 14rpx;
		}
	}

	.coupon-scroll {
		width: 100%;
		height: 684rpx;
		border-bottom: 2rpx solid #DEDBDB;
	}

	.coupon-wrap {
		padding: 30rpx 0;
	}

	.coupon-item {
		width: 700rpx;
		margin: 0 auto 48rpx;
		border: 2rpx solid #FFF2F2;
		box-sizing: border-box;
		border-radius: 16rpx;

		.coupon-img {
			width: 100%;
			height: 220rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.coupon-item-con {
				width: 100%;
				height: 100%;
				// background: red;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;

				.coupon-item-left {
					width: 220rpx;
					text-align: center;
					font-family: 'DIN-BOLD';
					font-size: 72rpx;
					color: #F73A07;

					text {
						font-size: 28rpx;
						color: #FF4819;
						padding-left: 2rpx;
					}
				}

				.coupon-item-left-used {
					color: #fff;

					text {
						color: #fff;
					}
				}

				.coupon-item-right {
					flex: 1;
					margin: 0 24rpx 0 18rpx;
					box-sizing: border-box;
					position: relative;

					.top {
						border-bottom: 2rpx dotted #DEDBDB;
						padding-bottom: 14rpx;
						position: relative;

						.title {
							font-weight: bold;
							font-size: 32rpx;
							color: #060201;
							line-height: 48rpx;
						}

						.tip {
							font-size: 24rpx;
							color: #DEDBDB;
							padding-top: 6rpx;
						}

						.use {
							width: 124rpx;
							height: 50rpx;
							background: #FF1C03;
							border-radius: 26rpx;
							color: #fff;
							position: absolute;
							right: 0;
							top: 50rpx;
						}

						.used {
							width: 66rpx;
							height: 66rpx;
							position: absolute;
							right: 0;
							top: 22rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

					}

					.rules {
						justify-content: space-between;
						font-size: 24rpx;
						color: #DEDBDB;
						padding-top: 10rpx;

						.circle {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.check {
						position: absolute;
						width: 50rpx;
						height: 50rpx;
						// background: red;
						right: 0;
						top: 30rpx;
					}
				}
			}

			.is-new {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				right: 0;
				top: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}

		.rules-wrap {
			width: 100%;
			height: 0rpx;
			background: #FFFFFF;
			overflow: hidden;
			margin-top: -20rpx;
			position: relative;
			z-index: 2;
			padding: 0 16rpx;
			box-sizing: border-box;
			transition: all 0.2s ease;
			opacity: 0;

			.title {
				font-size: 24rpx;
				color: #DEDBDB;
				line-height: 48rpx;
			}

			.p {
				font-size: 24rpx;
				line-height: 40rpx;
			}
		}

		.rules-wrap-show {
			height: 176rpx;
			opacity: 1;
		}

		.op {
			opacity: 0;
		}
	}

	.coupon-item-mb {
		margin: 0 auto 24rpx;
	}

	.watch-coupon {
		width: 100%;
		height: 80rpx;
		font-size: 24rpx;
	}
</style>